<template>
  <div>
    <el-card v-loading="passwordLoading" class="sun-el-card">
      <div style="font-weight: bold;font-size: 18px;margin-bottom: 14px;">初始化密码</div>
      <el-form
        ref="passwordFormData"
        :model="passwordFormData"
        label-position="left"
        label-width="100px"
      >
        <el-form-item
          label="新密码"
          prop="new_password"
          :rules="[
            { required: true, message: '8-20位密码,区分大小写', trigger: ['blur', 'change'] },
          ]"
        >
          <el-input v-model="passwordFormData.new_password" placeholder="请输入新密码" />
        </el-form-item>

        <el-form-item
          label="确认新密码"
          prop="new_password_confirmation"
          :rules="[
            { required: true, message: '请再次输入密码,8-20位,必须包含大小写字母/小写/数字/标点符号', trigger: ['blur', 'change'] },
          ]"
        >
          <el-input v-model="passwordFormData.new_password_confirmation" placeholder="请确认新密码" />
        </el-form-item>

        <el-form-item
          label="选择身份"
          prop="checkList"
          :rules="[
            { required: true, message: '设置密码对象的身份不能为空', trigger: ['blur', 'change'] },
          ]"
        >
          <el-checkbox-group v-model="passwordFormData.checkList">
            <el-checkbox v-for="(item) in passwordcheckList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>

      <div class="flex_end">
        <el-button size="small" type="primary" style="width: 100px;font-size: 14px;" @click="passwordOnFinish">提 交</el-button>
      </div>
    </el-card>

    <el-card v-loading="cyclicalityLoading" class="sun-el-card">
      <div style="font-weight: bold;font-size: 18px;margin-bottom: 14px;">设置默认学年学期</div>
      <el-form
        ref="cyclicalityFormData"
        :model="cyclicalityFormData"
        label-position="left"
        label-width="120px"
      >
        <el-form-item
          label="选择学年学期"
          prop="acad_year_term"
          :rules="[
            { required: true, message: '请选择学年学期', trigger: ['blur', 'change'] },
          ]"
        >
          <el-select v-model="cyclicalityFormData.acad_year_term" clearable style="width: 100%" placeholder="请选择学年学期">
            <el-option
              v-for="item in acad_year_term_list"
              :key="item.acad_year_term"
              :label="item.acad_year_term_name"
              :value="item.acad_year_term"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <div class="flex_end">
        <el-button size="small" type="primary" style="width: 100px;font-size: 14px;" @click="cyclicalityOnFinish">提 交</el-button>
      </div>
    </el-card>

    <el-card v-loading="sealLoading" class="sun-el-card">
      <div style="font-weight: bold;font-size: 18px;margin-bottom: 14px;">上传公章</div>
      <el-form
        ref="signature"
        label-position="left"
        label-width="120px"
      >
        <el-form-item
          label="选择公章"
          prop="signature"
          :rules="[
            { required: true, message: '请选择公章', trigger: ['blur', 'change'] },
          ]"
        >
          <el-upload
            class="upload-demo"
            action=""
            :disabled="!!fileList.length"
            :multiple="true"
            :http-request="(file) => {chooseFiles(file)}"
            accept="image/*"
            list-type="picture-card"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="(file, fileList) => {onChange(file, fileList)}"
          >
            <!-- <i slot="default" class="el-icon-plus" /> -->
            <el-button :disabled="!!fileList.length" size="small" type="primary">选择图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="file.percentage"
                  class="el-upload-list__item-delete"
                  @click="$XhrDownload(file.url)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

      </el-form>

      <div class="flex_end">
        <el-button size="small" :disabled="fileList.length ? !!fileList[0].percentage : true" type="primary" style="width: 100px;font-size: 14px;" @click="sealOnFinish">提 交</el-button>
      </div>
    </el-card>

    <el-card v-loading="sealLoading" class="sun-el-card">
      <div style="font-weight: bold;font-size: 18px;margin-bottom: 14px;">pdf文件权限</div>
      <el-form
        ref="pdfFormData"
        label-position="left"
        label-width="120px"
      >
        <el-checkbox-group v-model="pdfFormData.pdf_toolbar_config" size="mini" style="display: block;">
          <el-checkbox v-for="value_name in pdfList" :key="value_name.value" :label="value_name.value" border>{{ value_name.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form>

      <div class="flex_end">
        <el-button size="small" type="primary" style="width: 100px;font-size: 14px;" @click="pdfOnFinish">提 交</el-button>
      </div>
    </el-card>

    <el-dialog
      width="300"
      class="sun-el-dialog"
      :destroy-on-close="true"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogVisible"
    >
      <img width="100%" :src="dialogImageUrl" alt="图片加载失败">
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { put, get } from '@/api/request'
import { $tooltips } from '@/sun-components/SunMsg.js'
import $uploadFile from '@/sun-components/SunUploadFiles.js'
export default {
  name: 'DefaultSetting',
  components: { },
  inject: ['reload'],
  data() {
    return {
      acad_year_term_list: [],
      passwordLoading: false,
      passwordFormData: {
        new_password: '',
        new_password_confirmation: '',
        checkList: []
      },
      passwordcheckList: [
        { label: '教师', value: 'filter[is_teacher]' },
        { label: '课程评价专家', value: 'filter[courseCenterExpert.is_center_course_evaluation]' },
        { label: '课程准入专家', value: 'filter[courseCenterExpert.is_center_admission_review]' },
        { label: '部门专家', value: 'filter[is_department_expert]' },
        { label: '课程中心专家', value: 'filter[is_course_center_expert]' },
        { label: '校外', value: 'filter[is_external]' },
        { label: '部门负责人', value: 'filter[is_department_principal]' }
      ],

      pdfList: [
        { label: '打开本地pdf', value: 'openFile' },
        { label: '下载', value: 'download' },
        { label: '打印', value: 'print' }
      ],
      checkedPdf: [],

      cyclicalityFormData: {
        acad_year_term: ''
      },
      cyclicalityLoading: false,
      sealLoading: false,
      // sealFormData: {
      //   file_name: '',
      //   file_sub_name: '学校公章'
      // },
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      pdfFormData: {
        pdf_toolbar_config: []
        // key: 'upPdfToolbar'
      }
    }
  },
  created() {
    this.get_acad_year_term()
    this.defaultData()
  },
  methods: {
    /** 预览文件 */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /** 删除文件 */
    handleRemove(file) {
      if (file.percentage) {
        console.log('是网络图片')
      } else {
        console.log('删除本地图片')
      }
      this.fileList.splice(this.fileList.findIndex(item => item.url === file.url), 1)
    },
    /** 文件列表发生改变 */
    onChange(file, fileList) {
      this.fileList = fileList
    },
    /** 选择文件 */
    async chooseFiles(file) {},
    /** 提交公章 */
    async sealOnFinish() {
      this.sealLoading = true
      if (!this.fileList.length) {
        $tooltips('请选择公章图片!', 'error')
        return false
      }
      $uploadFile({ file: this.fileList[0].raw }, /** this.sealFormData */{}, '/api/admin/course/evaluation/setting/defaulting/default/university/seal')
        .then((response) => {
          if (response.code === 0) {
            $tooltips('公章上传成功!', 'success')
            this.reload()
          }
          this.sealLoading = false
        }).catch((err) => {
          console.log('errerr', err)
        })
    },
    async passwordOnFinish() {
      const _that = this
      this.$refs.passwordFormData.validate(valid => {
        if (valid) {
          _that.passwordLoading = true
          _that.passwordFormData.checkList.forEach(item => {
            Object.assign(_that.passwordFormData, { [item]: 1 })
          })
          put('course/evaluation/setting/defaulting/reset/password', _that.passwordFormData).then(response => {
            if (response.code === 0) {
              $tooltips('初始化密码成功!', 'success')
            }
            _that.passwordLoading = false
          })
        }
      })
    },
    async pdfOnFinish() {
      const _that = this
      put('course/evaluation/setting/defaulting/default/pdf/toolbar/config', _that.pdfFormData).then(response => {
        if (response.code === 0) {
          $tooltips(`设置pdf文件配置成功!`, 'success')
        }
      })
    },
    async cyclicalityOnFinish() {
      const _that = this
      this.$refs.cyclicalityFormData.validate(valid => {
        if (valid) {
          _that.cyclicalityLoading = true
          put('course/evaluation/setting/defaulting/default/semester', _that.cyclicalityFormData).then(response => {
            if (response.code === 0) {
              $tooltips(`设置默认学年学期成功!`, 'success')
            }
            _that.cyclicalityLoading = false
          })
        }
      })
    },
    async defaultData() {
      await get(`course/evaluation/setting/defaulting/default/data`).then(response => {
        if (response.code === 0) {
          response.data.forEach(item => {
            if (item.key === 'default_acad_year_term') {
              this.cyclicalityFormData.acad_year_term = item.value
            }
            if (item.key === 'signature_image') {
              this.fileList.push({
                percentage: 100,
                url: item.value
              })
            }
            if (item.key === 'pdf_toolbar_config') {
              this.pdfFormData.pdf_toolbar_config = item.value
            }
          })
        }
      })
    },
    async get_acad_year_term() {
      await get(`acad-year-term?method=get`).then(response => {
        if (response.code === 0) {
          this.acad_year_term_list = response.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .el-form--label-left .el-form-item__label{
    text-align: right;
  }
</style>
